<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- 重置样式 -->
		<link rel="stylesheet" href="../css/reset.css" />
		<!-- 常态化样式 -->
		<link rel="stylesheet" href="../css/normalize.css" />
		<!-- 公共样式 -->
		<link rel="stylesheet" href="../css/common.css" />
		<!-- 当前样式 -->
		<link rel="stylesheet" href="../css/logon.css" />
	</head>
	<body>
		<!-- 首页 -->
		<header class="flex-c-sb b-box">
			<div id="headbox">
				<a href="#">
					<h1></h1>
				</a>
				<div id="headboxText">
					<p>
						已有源码账号,
						<a href="./logIn.html">立即登录</a>
					</p>
				</div>
			</div>
		</header>
		<main>
			<section id="logon">
				<div id="logonbox">
					<div id="logontext">
						<div id="logonbox-text">
							<h1>欢迎注册</h1>
							<h2>百款接口免费试用</h2>
							<h1 id="btn">注册即送300元大礼包</h1>
						</div>
						<div id="logonForm">
							<form action="">
								<p>
									<!-- 用户名 -->
									<input
										type="text"
										id="user"
										placeholder="用户名（6~20位字母数字）"
									/>
									<span></span>
								</p>
								<p>
									<!-- 手机号 -->
									<input type="text" placeholder="请输入手机号码" id="phone" />
									<span></span>
								</p>
								<p>
									<input
										type="text"
										placeholder="请输入手机短信验证码"
										id="yz"
									/>
									<button id="button">获取验证码</button>
								</p>
								<p>
									<input
										type="password"
										id="pwd"
										placeholder="请输入6至12位的密码"
									/>
									<span></span>
								</p>
								<p>
									<input type="checkbox" id="yy" />
									我已阅读并接受
									<a href="#">《源码用户服务协议》</a>
									<a href="#">《源码隐私政策》</a>
								</p>
								<p><button id="btm">立即注册</button></p>
							</form>
						</div>
					</div>
				</div>
			</section>
		</main>
	</body>
	<script src="../js/logon.js"></script>
	<script>
		var user = document.getElementById("user");
		var pwd = document.getElementById("pwd");
		var phone = document.getElementById("phone");
		var spn = document.getElementsByTagName("span");
		var a = /^[\u4e00-\u9fa5_a-zA-Z0-9]{6,12}$/;
		var b = /^\w{6,12}$/;
		var c = /^[0-9]{6,12}$/;
		var d = /^[a-zA-z]{6,12}$/;
		var aa = 0,
			bb = 0,
			cc = 0;
		user.onfocus = function () {
			spn[0].innerHTML = "6-12 个字符，推荐使用中文名";
		};
		user.onblur = function () {
			if (user.value == "") {
				spn[0].innerHTML = "不能为空";
				aa = 0;
			} else if (a.test(user.value) == false) {
				spn[0].innerHTML = "长度不在范围内或者存在非法字符";
				aa = 0;
			} else {
				spn[0].innerHTML = "正确";
				aa = 1;
			}
		};
		pwd.onfocus = function () {
			spn[2].innerHTML = "长度在 6-12 个字符";
		};
		pwd.onblur = function () {
			if (pwd.value == "") {
				spn[2].innerHTML = "不能为空";
				bb = 0;
			} else if (b.test(pwd.value) == false) {
				spn[2].innerHTML = "长度不在范围内或者存在非法字符";
				bb = 0;
			} else if (c.test(pwd.value) == true) {
				spn[2].innerHTML = "不能全是数字";
				bb = 0;
			} else if (d.test(pwd.value) == true) {
				spn[2].innerHTML = "不能全是字母";
				bb = 0;
			} else {
				spn[2].innerHTML = "正确";
				bb = 1;
			}
		};
		phone.onfocus = function () {
			spn[1].innerHTML = "6-12 个字符，推荐使用中文名";
		};
		phone.onblur = function () {
			if (phone.value == "") {
				spn[1].innerHTML = "不能为空";
				cc = 0;
			} else if (e.test(user.value) == false) {
				spn[1].innerHTML = "长度不在范围内或者存在非法字符";
				cc = 0;
			} else {
				spn[1].innerHTML = "正确";
				cc = 1;
			}
		};
		function btn() {
			if (aa + bb + cc == 3) {
				alert("提交成功");
			} else {
				alert("提交失败");
			}
		}
	</script>
</html>
